<template>
	<view>
		<!-- 课程 -->
		<classes :list="classlist"></classes>
		<!-- 活动 -->
		<view class="listbox" v-for="(item,index) in activitylist" :key="index" @click="todetail(item,index)">
			<view class="listinfo">
				<view class="leftbox">
					<image :src="item.img.split(',')[0]"></image>
				</view>
				<view class="rightbox">
					<view class="namebox">{{item.activity_name}}</view>
					<view class="placebox">
						<image src="../../static/dw.png"></image>
						<view>{{item.address}}</view>
					</view>
					<view class="placebox">
						<image src="../../static/time.png"></image>
						<view>时间: {{dateFormat(item.start_time)}}</view>
					</view>
				</view>
			</view>
			<view class="infobut"  @click.stop="todetail(item,index)">
				活动报名
			</view>
		</view>
		<!-- 老师 -->
		<view class="teacherlistbox" v-for="(item,index) in teacherlist" :key="index" @click="toteacherdetail(item,index)">
			<view class="leftbox">
				<image :src="item.avator.split(',')[0]"></image>
			</view>
			<view class="rightbox">
				<view class="namebox">{{item.name}}</view>
				<view class="specbox">
					<view class="specitem" v-for="(s,sindex) in item.label_list" :key="sindex">
						{{s.major_name}}
					</view>
				</view>
				<view class="classbox">
					<text>课程：</text>立体手工课程 | 儿童手工课程 | 儿...
				</view>
			</view>
		</view>
		<kong v-if="classlist.length==0&&activitylist.length==0&&teacherlist.length==0"></kong>
	</view>
</template>

<script>
	import classes from '../../components/goodsclass.vue'
	import teacher from '../../components/teacher.vue'
	import kong from '../../components/kong.vue'
	export default {
		components:{
			classes,teacher,kong
		},
		data() {
			return {
				classlist:[],
				activitylist:[],
				teacherlist:[],
			}
		},
		onLoad(option) {
			this.getlist(option.keyword)
		},
		methods: {
			getlist(keyword){
				this.$http({
					url:'/api/Course/search_list',
					data:{
						keyword
					}
				}).then(res=>{
					this.classlist = res.data.kecheng
					this.activitylist = res.data.activity
					this.teacherlist = res.data.teacher
				})
			},
			toteacherdetail(item,index){
				uni.navigateTo({
					url:'/pages/teacherinfo/teacherinfo?id='+item.id
				})
			},
			todetail(item,index){
				uni.navigateTo({
					url:'/pages/actinfo/actinfo?id='+item.id
				})
			},
			dateFormat: function(value) {
					var date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
					var year = date.getFullYear();
					var month = ("0" + (date.getMonth() + 1)).slice(-2);
					var sdate = ("0" + date.getDate()).slice(-2);
					var hour = ("0" + date.getHours()).slice(-2);
					var minute = ("0" + date.getMinutes()).slice(-2);
					var second = ("0" + date.getSeconds()).slice(-2);
					// 拼接
					var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
					// 返回
					return result;
				},
		}
	}
</script>

<style lang="scss" scoped>
	.listbox{
		width: 690rpx;
		padding: 0 30rpx;
		// height: 326rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		
		.listinfo{
			height: 218rpx;
			border-bottom: 2rpx solid #ECECEC;
			display: flex;
			align-items: center;
			.leftbox{
				width: 190rpx;
				background: #FFFFFF;
				border-radius: 6rpx;
				image{
					width: 160rpx;
					height: 160rpx;
				}
			}
			.rightbox{
				width: 500rpx;
				.namebox{
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.placebox{
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #555555;
					display: flex;
					align-items: center;
					margin-top: 18rpx;
					image{
						width: 24rpx;
						height: 26rpx;
						margin-right: 14rpx;
					}
					>view{
						width: 460rpx;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
		.infobut{
			width: 690rpx;
			height: 68rpx;
			background: #FF8A9B;
			border-radius: 36rpx ;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 68rpx;
			margin-top: 20rpx;
		}
	}
	.teacherlistbox{
		width: 690rpx;
		padding:30rpx;
		// height: 222rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		margin-top: 20rpx;
		align-items: center;
		.leftbox{
			width: 182rpx;
			image{
				width: 160rpx;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 7rpx;
			}
		}
		.rightbox{
			width: 508rpx;
			.namebox{
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
			}
			.specbox{
				display: flex;
				align-items: center;
				margin: 18rpx 0;
				.specitem{
					width: fit-content;
					height: 50rpx;
					background: linear-gradient(90deg, #FEF0E5 0%, #FFE0CD 100%);
					border-radius: 8rpx 26rpx 26rpx 26rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #A07150;
					padding: 0 16rpx;
					margin-right: 16rpx;
				}
			}
			.classbox{
				width: 508rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				>text{
					color: #555555;
				}
			}
		}
	}

</style>
